import React, { Component } from 'react'
import moment from 'moment'
import { Breadcrumb, Button, Table, message, Modal } from 'antd'
import API from 'UTIL/libs/api'
import './detail.less'

const confirm = Modal.confirm

function ObjToUrlStr(obj) {
  var str = ''
  if (obj != {}) {
    var i = 0
    for (var key in obj) {
      if (i == 0) {
        str = str + '?' + key + '=' + obj[key]
      } else {
        str = str + '&' + key + '=' + obj[key]
      }
      i++
    }
  }
  return str
}

export default class Detail extends Component {
  constructor(props) {
    super(props)
    this.displayName = 'Detail'
    this.state = {
      columns: [{
        title: '消费时间',
        dataIndex: 'startDate',
        key: 'startDate',
        render: text => moment(text).format('L')
      }, {
        title: '消费金额',
        dataIndex: 'cost',
        key: 'cost'
      }, {
        title: '兑换码',
        dataIndex: 'redeemCode',
        key: 'redeemCode'
      }, {
        title: '消费类型',
        dataIndex: 'vipId',
        key: 'vipId',
        render: (text, item) => item.redeemCode !== '' ? '兑换' : text == 1 ? '月vip' : text == 12 ? '年vip' : text == 3 ? '季vip' : '其他'
      }],
      pageIndex: 0, // 从第几个开始
      pageSize: 10
    }
  }
  // 更改状态
  setStatus() {
    var { userBasic } = this.state
    var _this = this
    confirm({
      title: '你确认要将该账户' + (userBasic.status == 1 ? '封号' : userBasic.status == 2 ? '恢复' : '') + '吗?',
      content: '账户名：' + userBasic.alias,
      onOk() {
        API.callJson('/userbasic/put-stu' + ObjToUrlStr({
          status: userBasic.status == 1 ? 2 : userBasic.status == 2 ? 1 : null,
          id: userBasic.id
        }))().then((data)=>{
          message.success('操作成功')
          _this.fetchData()
        }).catch((msg)=>{
          message.error('操作失败')
          console.log(msg)
        })
      },
      onCancel() {
        console.log('Cancel')
      }
    })
  }
  // 获取数据
  fetchData = (params = {}) => {
    var { id } = this.props.params
    var { pageIndex, pageSize } = this.state
    this.setState({
      loading: true
    })
    API.getJson('/userbasic/one' + ObjToUrlStr({
      pageIndex: pageIndex,
      pageSize: pageSize,
      userId: id,
      ...params
    }))().then((data)=>{
      console.log(data)
      this.setState({
        list: data.list,
        total: data.count,
        userBasic: data.userBasic,
        loading: false
      })
    }).catch((msg)=>{
      console.log(msg)
      this.setState({
        loading: false
      })
      message.error(msg)
    })
  }
  // table内变换：分页...
  handleTableChange = (pagination, filters, sorter) => {
    this.setState({
      pageIndex: (pagination.current - 1) * pagination.pageSize
    })
    this.fetchData({
      pageIndex: (pagination.current - 1) * pagination.pageSize
    })
  }
  componentDidMount() {
    this.fetchData()
  }
  render() {
    var { columns, list, loading, pageIndex, pageSize, total, userBasic } = this.state
    var pagination = {
      current: pageIndex / pageSize + 1,
      pageSize: pageSize,
      total: total
    }
    return <div className="tederen-detail">
      <div className="tederen-breadcrumb-container">
        <Breadcrumb separator=">">
          <Breadcrumb.Item><a className="tederen-breadcrumb-title" href="#/customer">客户管理</a></Breadcrumb.Item>
          <Breadcrumb.Item><a >客户详情</a></Breadcrumb.Item>
        </Breadcrumb>
      </div>
      {userBasic ? <div className="panel clearfix">
        <div className="panel-item item1 clearfix">
          <div className="headUrl">
            <img src={ userBasic.icon && !userBasic.icon.match('http') ? require('ASSET/img/default_head.jpg') : userBasic.icon }/>
          </div>
          <div className="text">
            <div className="nickname">{userBasic.alias}</div>
            <div>手机：{userBasic.phone}</div>
            <div>ID：{userBasic.id}</div>
          </div>
        </div>
        <div className="panel-item item2">
          <div className="">注册时间：{moment(userBasic.createTime).format('L')}</div>
          <div className="">最后一次登录ip：{userBasic.ip}</div>
          <div className="">客户类别：{userBasic.vipId == 1 ? '月vip' : userBasic.vipId == 12 ? '年vip' : userBasic.vipId == 3 ? '季vip' : '非vip'}</div>
        </div>
        <div className="panel-item item3">
          <div className="">状态：{userBasic.status == 1 ? '正常' : userBasic.status == 2 ? '封号中' : '-'}</div>
          <div className="">
            <Button onClick={this.setStatus.bind(this)}>
              { userBasic.status == 1 ? '封号' : userBasic.status == 2 ? '恢复' : '' }
            </Button>
          </div>
        </div>
      </div> : null}
      <div className="tederen-border-title">消费记录</div>
      <Table pagination={pagination} columns={columns} dataSource={list} loading={loading} onChange={this.handleTableChange}/>
    </div>
  }
}

